<template>
	<view class="pills_main">
		<view @click.stop="triggerClick(value[0])">
			{{value[0]}}
		</view>
		<view @click.stop="triggerClick(value[1])">
			{{value[1]}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "StockPills",
		props: ["value"],
		methods: {
			triggerClick(value) {
				this.$emit("click", value)
			}
		}
	}
</script>

<style lang="scss">
	.pills_main {
		width: 95%;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		border: 2px solid rgb(0, 122, 255);
		background-color: rgb(0, 122, 255);

		&>view {
			width: 52%;
			text-align: center;
			line-height: 56rpx;
			font-size: 30rpx;

			&:first-child {
				background-color: rgb(0, 122, 255);
				color: white;
			}

			&:last-child {
				background-color: rgb(248, 248, 248);
			}
		}
	}
</style>
